import { FC, useState } from 'react'
import { Form, Input, Button, NumberKeyboard, Dialog, Toast } from 'antd-mobile'
import Head from 'next/head'
import PageLayout from '@/components/layouts/PageLayout'
import { useRouter } from 'next/router'
import { RequireAuth } from '@/utils/decorators/auth'

class TransferPageClass {
  @RequireAuth()
  static async handleTransfer(values: any) {
    const result = await Dialog.confirm({
      content: `确认向 ${values.account} 转账 ${values.amount} 元？`,
    })

    if (result) {
      Toast.show({
        icon: 'success',
        content: '转账成功',
      })
      return true
    }
    return false
  }
}

const TransferPage: FC = () => {
  const router = useRouter()
  const [form] = Form.useForm()
  const [showKeyboard, setShowKeyboard] = useState(false)
  const [activeInput, setActiveInput] = useState<string>('')

  const handleInputClick = (name: string) => {
    setActiveInput(name)
    setShowKeyboard(true)
  }

  const handleKeyboardInput = (value: string) => {
    form.setFieldValue(activeInput, value)
  }

  const onFinish = async (values: any) => {
    const success = await TransferPageClass.handleTransfer(values)
    if (success) {
      router.back()
    }
  }

  return (
    <>
      <Head>
        <title>转账 - 移动端应用</title>
      </Head>
      <PageLayout title="转账" showTab={false} onBack={() => router.back()}>
        <div className="transfer-page">
          <div className="card">
            <div className="balance">
              <div className="label">可用余额（元）</div>
              <div className="amount">138,568.00</div>
            </div>
          </div>

          <Form
            form={form}
            layout='vertical'
            onFinish={onFinish}
            footer={
              <Button block type='submit' color='primary' size='large'>
                确认转账
              </Button>
            }
          >
            <Form.Item
              name='account'
              label='收款账号'
              rules={[{ required: true, message: '请输入收款账号' }]}
            >
              <Input placeholder='请输入收款账号' />
            </Form.Item>

            <Form.Item
              name='name'
              label='收款人姓名'
              rules={[{ required: true, message: '请输入收款人姓名' }]}
            >
              <Input placeholder='请输入收款人姓名' />
            </Form.Item>

            <Form.Item
              name='amount'
              label='转账金额'
              rules={[{ required: true, message: '请输入转账金额' }]}
            >
              <Input
                placeholder='请输入转账金额'
                readOnly
                onClick={() => handleInputClick('amount')}
              />
            </Form.Item>

            <Form.Item
              name='remark'
              label='备注'
            >
              <Input placeholder='请输入备注信息（选填）' />
            </Form.Item>
          </Form>

          <NumberKeyboard
            visible={showKeyboard}
            onClose={() => setShowKeyboard(false)}
            onInput={handleKeyboardInput}
            customKey='.'
            confirmText='确定'
            onConfirm={() => setShowKeyboard(false)}
          />
        </div>

        <style jsx>{`
          .transfer-page {
            padding: 16px;
          }
          .card {
            background: linear-gradient(135deg, var(--adm-color-primary) 0%, #1890ff 100%);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            color: white;
          }
          .balance {
            text-align: center;
          }
          .label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 8px;
          }
          .amount {
            font-size: 32px;
            font-weight: bold;
          }
          :global(.adm-form) {
            background: white;
            border-radius: 8px;
            padding: 16px;
          }
          :global(.adm-form-item) {
            margin-bottom: 16px;
          }
          :global(.adm-input) {
            height: 44px;
            font-size: 16px;
          }
        `}</style>
      </PageLayout>
    </>
  )
}

export default TransferPage 